<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.clearfix:after,
			.clearfix:before {
				content: '';
				display: table;
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.box {
				background-color: #f9f9f9;
			}
			
			.y_content {
				width: 1100px;
				margin: auto;
				padding-bottom: 100px;
			}
			
			.y_head {
				width: 100%;
				background-color: #EFEFEF;
			}
			
			.y_header {
				width: 1100px;
				margin: auto;
				padding: 10px 0 10px;
			}
			
			.y_cont_logo {
				width: 200px;
				height: 70px;
				float: left;
				margin-left: 20px;
			}
			
			.y_cont_logo img {
				width: 200px;
				height: 70px;
			}
			
			.y_login_user {
				width: 100px;
				float: right;
				margin-right: 20px;
				position: relative;
			}
			
			.y_login_user img {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				padding: 10px;
				display: block;
				margin: auto;
			}
			
			.y_user_detail {
				display: none;
			}
			
			.y_user_detail {
				width: 200px;
				background: #FFF;
				border: solid 1px #CCCCCC;
				position: absolute;
				left: -40px;
				top: 80px;
				z-index: 99;
			}
			
			.y_user_detail p,
			.y_user_detail li {
				font-size: 16px;
				line-height: 46px;
				text-align: center;
			}
			
			.y_user_detail p a,
			.y_user_detail li a {
				text-decoration: none;
				color: #000;
			}
			
			.y_book_tit h3 {
				font-size: 32px;
				line-height: 80px;
			}
			
			.y_book_text {
				width: 190px;
				float: left;
				margin: 0 10px;
				position: relative;
			}
			
			.y_book_text img {
				width: 190px;
				height: 250px;
			}
			
			.y_book_txt p:nth-child(1) {
				font-size: 20px;
				line-height: 40px;
			}
			
			.y_book_txt p:nth-child(2) {
				font-size: 16px;
				line-height: 30px;
				padding-left: 10px;
			}
			
			.y_book_text span {
				width: 25px;
				height: 25px;
				line-height: 25px;
				border-radius: 50%;
				background: #ce2f2b;
				color: #FFF;
				position: absolute;
				right: -10px;
				top: -10px;
				text-align: center;
				font-size: 20px;
				display: none;
			}
			
			.y_login_bottom {
				width: 100%;
				padding-bottom: 30px;
			}
			
			.y_login_bottom p {
				font-size: 16px;
				line-height: 50px;
				text-align: center;
			}
			
			.cont {
				min-height: 700px;
			}
			
			.y_mybooks {
				min-height: 300px;
			}
			
			#y_mybook_list {
				width: 800px;
				display: block;
				margin: 0 auto 30px;
			}
			
			#y_mybook_list li {
				width: 45%;
				float: left;
				text-align: center;
				line-height: 80px;
				font-size: 20px;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				margin-left: 20px;
				background: #EFEFEF;
			}
			
			#y_mybook_list li.active {
				background: #FFF;
				color: #008CFF;
			}
			
			.y_book_cont {
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="y_head">
				<div class="y_header clearfix">
					<div class="y_cont_logo">
						<img src="images/2.png" />
					</div>
					<div class="y_login_user">
						<img src="images/1.png" />
						<ul class="y_user_detail">
							<p>
								<a href="">立即登录</a>
							</p>
							<li>
								用户名
							</li>
							<li>
								我的书架
							</li>
							<li>
								<a href="">我的收藏</a>
							</li>
							<li>
								<a href="">个人中心</a>
							</li>
							<li>
								<a href="">退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="y_content">
				<div class="y_book_tit">
					<h3>我的书架</h3>
				</div>
				<ul id="y_mybook_list" class="clearfix">
					<li class="active">我的创建</li>
					<li>历史浏览</li>
				</ul>
				<div class="y_mybooks">
					<div class="y_book_texts clearfix">
						<!--<div class="y_book_text">
						<span>×</span>
						<div class="y_book_img">
							<img src="../../img/1.jpg" />
						</div>
						<div class="y_book_txt">
							<p>《但是奇偶发》</p>
							<p>作者</p>
						</div>
					</div>-->
					</div>
					<div class="y_book_cont clearfix">
						<!--<div class="y_book_text">
						<span>×</span>
						<div class="y_book_img">
							<img src="../../img/1.jpg" />
						</div>
						<div class="y_book_txt">
							<p>《但是奇偶发》</p>
						</div>
					</div>-->

					</div>
				</div>
			</div>

			<div class="y_login_bottom">
				<p>清朗网文　|　关于逐浪　|　作者投稿　|　用户指南　|　服务条款　|　版权声明　|　网站地图　|　招聘信息　|　联系我们</p>
				<p>Copyright © 2019 zhulang.com, All Rights Reserved. 南京大众书网图书文化有限公司版权所有 未经书面许可不得复制转载。</p>
				<p>增值电信业务经营许可证苏B2-20130019 苏ICP备12028084号 苏网文[2016]5224-123号 新出网证（苏）字0027号　</p>
			</div>
		</div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		//判断有没有登录
		if(!localStorage.user) {
			$('.y_user_detail p').css({
				display: 'block'
			})
			$('.y_user_detail li').css({
				display: 'none'
			})
		} else {
			$('.y_user_detail p').css({
				display: 'none'
			})
			$('.y_user_detail li').css({
				display: 'block'
			})
			$('.y_login_user img').attr('src', localStorage.img)
			$('.y_login_user li').eq(0).html(localStorage.name)
		}
		//登陆注册
		$('.y_login_user').on('mouseover', function() {
			$('.y_user_detail').show()
		})
		$('.y_login_user').on('mouseout', function() {
			$('.y_user_detail').hide()
		})
		//书架移入删除小说按钮
		$('.y_book_texts').on('mouseenter', '.y_book_text', function() {
			$(this).find('span').show()
		})
		$('.y_book_texts').on('mouseleave', '.y_book_text', function() {
			$(this).find('span').hide()
		})
		//顶部头像显示
		$('.y_login_user img').attr('src', localStorage.img)
		$('.y_login_user li').eq(0).html(localStorage.name)

		//书架创建切换

		$('#y_mybook_list li').eq(0).on('click', function() {
			$(this).addClass('active').siblings().removeClass('active')
			$('.y_mybooks .y_book_texts').show().siblings().hide()
		})
		$('#y_mybook_list li').eq(1).on('click', function() {
			$(this).addClass('active').siblings().removeClass('active')
			$('.y_mybooks .y_book_cont').show().siblings().hide()
		})
		var href = 'http://localhost:8000'

		$.ajax({
			type: "post",
			url: href + "/users/mybooks",
			data: {
				loginuid: localStorage.uid
			},
			success(data) {
				console.log(data)
				data.forEach(function(o, i) {
					var oDiv = $('<div class="y_book_text">').attr('data-suid', data[i].uid)
					var oA = $('<a>')
					oA.append($('<span>×</span>')).append($('<div class="y_preson_pic" data-toggle="modal" data-target="#myNovel">')
						.append($('<img src=""/>').attr('src', data[i].novelimg)).append($('<p></p>').html('《' + data[i].novelname + '》'))
					)

					oDiv.append(oA)
					$('.y_book_texts').prepend(oDiv)
				})
			}
		});
		$('.y_book_texts').on('click', '.y_book_text', function() {
			$(this).children('a').attr('href', href + '/list.html?suid=' + $(this).attr('data-suid'))
			var _this = $(this)
			$.ajax({
				type: "post",
				url: href + "/users/history",
				data: {
					loginuid: localStorage.uid,
					suid: _this.attr('data-suid')
				},
				success(data) {
					console.log(data)
				}
			});
		})
		var search_type = ''
		$('.y_book_cont').on('click', '.y_book_text', function() {
			var _this = $(this)
			$.ajax({
				type: "post",
				url: href + "/users/chazhao",
				data: {
					suid: _this.attr('data-suid')
				},
				success(data) {
					console.log(data)
					search_type = data[0].loginuid
					if(search_type == localStorage.uid) {
						_this.children('a').attr('href', href + '/list.html?suid=' + _this.attr('data-suid'))
						$.ajax({
						type: "post",
						url: href + "/users/history",
						data: {
							loginuid: localStorage.uid,
							suid: _this.attr('data-suid')
						},
						success(data) {
							console.log(data)
						}
					});
					} else {
						_this.children('a').attr('href', href + '/fiction.html?suid=' + _this.attr('data-suid'))
						$.ajax({
						type: "post",
						url: href + "/users/history",
						data: {
							loginuid: localStorage.uid,
							suid: _this.attr('data-suid')
						},
						success(data) {
							console.log(data)
						}
					});
					}
					
				}
			});
		})
		$.ajax({
			type: "post",
			url: href + "/users/myliulan",
			data: {
				num: localStorage.uid
			},
			success(data) {
				console.log(data)
				data.forEach(function(o, i) {
					var oDiv = $('<div class="y_book_text">').attr('data-suid', data[i].uid)
					var oA = $('<a>')
					oA.append($('<span>×</span>')).append($('<div class="y_preson_pic" data-toggle="modal" data-target="#myNovel">')
						.append($('<img src=""/>').attr('src', data[i].novelimg)).append($('<p></p>').html('《' + data[i].novelname + '》')).append($('<p>').html('作者:' + data[i].author))
					)

					oDiv.append(oA)
					$('.y_book_cont').prepend(oDiv)
				})
			}
		});
		//删除小说
		$('#y_preson_found').on('click', 'span', function() {
			searchuid = $(this).parents().attr('data_searchuid')
			var _this = $(this)
			console.log(searchuid)
			$.ajax({
				type: "post",
				url: href + "/users/del",
				data: {
					searchuid: searchuid
				},
				success(data) {
					alert(data)
					$.ajax({
						type: "post",
						url: href + "/users/delete",
						data: {
							searchuid: searchuid
						},
						success(data) {
							console.log(data)
						}
					})
					_this.parent().remove()
				}
			});
		})
		//退出登录
		$('.y_login_user li').eq(4).on('click', function() {
			$('.y_login_user li').eq(0).html('用户名:')
			$('.y_login_user img').attr('src', 'images/1.png')
			localStorage.clear('user')
			localStorage.clear('uid')
			localStorage.clear('img')
			localStorage.clear('name')
			$(this).children('a').attr('href', href)
		})
		//个人中心
		$('.y_login_user li').eq(3).on('click', function() {
			$(this).children('a').attr('href', href + '/detials.html')
		})
		//个人收藏
		$('.y_login_user li').eq(2).on('click', function() {
			$(this).children().attr('href', href + '/collect.html')
		})
	</script>

</html>